<template>
    <el-container class="layout-root">
        <el-aside width="200px" class="layout-aside">
            <div class="logo-area">
                <!-- <img src="/logo.svg" class="logo-img" /> -->
                <span class="logo-title">点餐后台</span>
            </div>
            <el-menu :default-active="activeMenu" class="el-menu-vertical-demo custom-menu" router>
                <el-menu-item index="/">
                    <el-icon>
                        <HomeFilled />
                    </el-icon>
                    <span>首页</span>
                </el-menu-item>
                <el-menu-item index="/product-category">
                    <el-icon>
                        <UserFilled />
                    </el-icon>
                    <span>商品分类管理</span>
                </el-menu-item>
                <el-menu-item index="/user-category">
                    <el-icon>
                        <UserFilled />
                    </el-icon>
                    <span>用户分类管理</span>
                </el-menu-item>
                <el-menu-item index="/product">
                    <el-icon>
                        <UserFilled />
                    </el-icon>
                    <span>商品管理</span>
                </el-menu-item>
                <el-menu-item index="/order">
                    <el-icon>
                        <UserFilled />
                    </el-icon>
                    <span>订单管理</span>
                </el-menu-item>
                <el-menu-item index="/user">
                    <el-icon>
                        <UserFilled />
                    </el-icon>
                    <span>用户管理</span>
                </el-menu-item>
                <!-- 可添加更多菜单项 -->
            </el-menu>
        </el-aside>
        <el-container>
            <el-header class="layout-header">
                <div class="header-center">
                    <!-- <span class="header-title">点餐管理后台</span> -->
                </div>
                <div class="header-right">
                    <span class="user-info">{{ username }}</span>
                    <el-button link @click="logout">退出登录</el-button>
                </div>
            </el-header>
            <el-main>
                <router-view />
            </el-main>
        </el-container>
    </el-container>
</template>

<script lang="ts" setup>
import { useRouter, useRoute } from 'vue-router'
import { HomeFilled, UserFilled } from '@element-plus/icons-vue'
import { ref, computed, onMounted } from 'vue'

const router = useRouter()
const route = useRoute()
const activeMenu = computed(() => route.path)

const username = ref('')
onMounted(() => {
    username.value = localStorage.getItem('username') || '管理员'
})

const logout = () => {
    localStorage.removeItem('token')
    router.push('/login')
}
</script>

<style scoped>
.layout-root {
    min-height: 100vh;
    height: 100vh;

}

.layout-aside {
    background: #fff;
    border-right: 1px solid #ececec;
    box-shadow: 2px 0 8px #f0f1f2;
    padding: 0;
}

.logo-area {
    display: flex;
    align-items: center;
    height: 60px;
    padding: 0 16px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 8px;
}

.logo-img {
    width: 32px;
    height: 32px;
    margin-right: 8px;
}

.logo-title {
    font-weight: bold;
    font-size: 18px;
    color: #409eff;
}

.custom-menu {
    border: none;
    background: transparent;
}

.custom-menu .el-menu-item {
    border-radius: 8px;
    margin: 4px 8px;
    transition: background 0.2s;
}

.custom-menu .el-menu-item.is-active,
.custom-menu .el-menu-item:hover {
    background: #e6f7ff;
    color: #409eff;
}

.layout-header {
    background: #fff;
    box-shadow: 0 2px 8px #f0f1f2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0 32px;
    border-bottom: 1px solid #ececec;
}

.header-center {
    flex: 1;
    text-align: center;
}

.header-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.user-info {
    color: #666;
    font-size: 15px;
    margin-right: 8px;
}

.el-container,
.el-main {
    height: 100%;
}

:global(html),
:global(body) {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
</style>
